import React, { Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { Spin } from 'antd';
import { PERMISSIONS } from '../utils/permissions';

// 布局组件
import MainLayout from '../layouts/MainLayout';
import AuthLayout from '../layouts/AuthLayout';

// 路由守卫
import ProtectedRoute from '../components/ProtectedRoute';

// 页面组件 - 懒加载
const Login = React.lazy(() => import('../pages/Auth/Login'));
const Dashboard = React.lazy(() => import('../pages/Dashboard'));

// 用户管理
const UserList = React.lazy(() => import('../pages/User/UserList'));
const UserDetail = React.lazy(() => import('../pages/User/UserDetail'));

// 店铺管理
const ShopList = React.lazy(() => import('../pages/Shop/ShopList'));
const ShopDetail = React.lazy(() => import('../pages/Shop/ShopDetail'));
const ShopApproval = React.lazy(() => import('../pages/Shop/ShopApproval'));
const ShopStatistics = React.lazy(() => import('../pages/Shop/ShopStatistics'));
const ShopEdit = React.lazy(() => import('../pages/Shop/ShopEdit'));

// 商品管理
const ProductList = React.lazy(() => import('../pages/Product/ProductList'));
const ProductDetail = React.lazy(() => import('../pages/Product/ProductDetail'));
const ProductCreate = React.lazy(() => import('../pages/Product/ProductCreate'));
const ProductEdit = React.lazy(() => import('../pages/Product/ProductEdit'));
const CategoryManagement = React.lazy(() => import('../pages/Product/CategoryManagement'));
const StockManagement = React.lazy(() => import('../pages/Product/StockManagement'));

// 订单管理
const OrderList = React.lazy(() => import('../pages/Order/OrderList'));
const OrderDetail = React.lazy(() => import('../pages/Order/OrderDetail'));
const OrderProcessing = React.lazy(() => import('../pages/Order/OrderProcessing'));
const OrderStatistics = React.lazy(() => import('../pages/Order/OrderStatistics'));

// 优惠券管理
const CouponList = React.lazy(() => import('../pages/Coupon/CouponList'));
const CouponCreate = React.lazy(() => import('../pages/Coupon/CouponCreate'));

// 轮播图管理
const BannerList = React.lazy(() => import('../pages/Banner/BannerList'));
const BannerCreate = React.lazy(() => import('../pages/Banner/BannerCreate'));

// 销售数据
const SalesOverview = React.lazy(() => import('../pages/Sales/SalesOverview'));
const SalesAnalytics = React.lazy(() => import('../pages/Sales/SalesAnalytics'));

// 客服管理
const ChatList = React.lazy(() => import('../pages/Chat/ChatList'));
const ChatDetail = React.lazy(() => import('../pages/Chat/ChatDetail'));

// 系统设置
const SystemSettings = React.lazy(() => import('../pages/System/SystemSettings'));
const Profile = React.lazy(() => import('../pages/System/Profile'));

// 错误页面
const NotFound = React.lazy(() => import('../pages/Error/NotFound'));
const Forbidden = React.lazy(() => import('../pages/Error/Forbidden'));

// 加载组件
const PageLoading = () => (
  <div style={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '200px'
  }}>
    <Spin size="large" />
  </div>
);

// 路由配置
export const router = createBrowserRouter([
  {
    path: '/login',
    element: (
      <AuthLayout>
        <Suspense fallback={<PageLoading />}>
          <Login />
        </Suspense>
      </AuthLayout>
    ),
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <MainLayout />
      </ProtectedRoute>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/dashboard" replace />,
      },
      {
        path: 'dashboard',
        element: (
          <Suspense fallback={<PageLoading />}>
            <Dashboard />
          </Suspense>
        ),
      },

      // 用户管理路由
      {
        path: 'users',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.USER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <UserList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.USER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <UserDetail />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 店铺管理路由
      {
        path: 'shops',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'approval',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_APPROVE]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopApproval />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'statistics',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopStatistics />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopDetail />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id/edit',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_UPDATE]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopEdit />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'create',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SHOP_CREATE]}>
                <Suspense fallback={<PageLoading />}>
                  <ShopEdit />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 商品管理路由
      {
        path: 'products',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ProductList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'create',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_CREATE]}>
                <Suspense fallback={<PageLoading />}>
                  <ProductEdit />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ProductDetail />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id/edit',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_UPDATE]}>
                <Suspense fallback={<PageLoading />}>
                  <ProductEdit />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'categories',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <CategoryManagement />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'stock',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.PRODUCT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <StockManagement />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 订单管理路由
      {
        path: 'orders',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.ORDER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <OrderList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'processing',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.ORDER_UPDATE]}>
                <Suspense fallback={<PageLoading />}>
                  <OrderProcessing />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'statistics',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.ORDER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <OrderStatistics />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.ORDER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <OrderDetail />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 优惠券管理路由
      {
        path: 'coupons',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.COUPON_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <CouponList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'create',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.COUPON_CREATE]}>
                <Suspense fallback={<PageLoading />}>
                  <CouponCreate />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 轮播图管理路由
      {
        path: 'banners',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.BANNER_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <BannerList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'create',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.BANNER_CREATE]}>
                <Suspense fallback={<PageLoading />}>
                  <BannerCreate />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 销售数据路由
      {
        path: 'sales',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SALES_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <SalesOverview />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'analytics',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SALES_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <SalesAnalytics />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 客服管理路由
      {
        path: 'chat',
        children: [
          {
            index: true,
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.CHAT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ChatList />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: ':id',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.CHAT_VIEW]}>
                <Suspense fallback={<PageLoading />}>
                  <ChatDetail />
                </Suspense>
              </ProtectedRoute>
            ),
          },
        ],
      },

      // 系统设置路由
      {
        path: 'system',
        children: [
          {
            path: 'settings',
            element: (
              <ProtectedRoute permissions={[PERMISSIONS.SYSTEM_CONFIG]}>
                <Suspense fallback={<PageLoading />}>
                  <SystemSettings />
                </Suspense>
              </ProtectedRoute>
            ),
          },
          {
            path: 'profile',
            element: (
              <Suspense fallback={<PageLoading />}>
                <Profile />
              </Suspense>
            ),
          },
        ],
      },

      // 错误页面
      {
        path: '403',
        element: (
          <Suspense fallback={<PageLoading />}>
            <Forbidden />
          </Suspense>
        ),
      },
      {
        path: '*',
        element: (
          <Suspense fallback={<PageLoading />}>
            <NotFound />
          </Suspense>
        ),
      },
    ],
  },
], {
  future: {
    v7_startTransition: true,
    v7_relativeSplatPath: true,
  },
});

export default router;
